* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    margin: 10px auto;
    height: 140px;
    width: 300px;

    /* 父元素设置背景色 */
    background: #fff;

    display: flex;
    align-items: center;

    /* 父元素设置contrast */
    filter: contrast(30);
}

/* 
    transform: scale(0.1) 将大小扩大至原来的 0.1 倍
 */
.circle {
    height: 50px;
    width: 60px;
    background: #1aa7ff;
    border-radius: 50%;
    position: absolute;

    /* 子元素设置blur */
    filter: blur(20px);

    transform: scale(0.1);
    transform-origin: left top;
}

.circle {
    animation: move 4s cubic-bezier(.44, .79, .83, .96) infinite;
}

.circle:nth-child(2) {
    animation-delay: .4s;
}

.circle:nth-child(3) {
    animation-delay: .8s;
}

.circle:nth-child(4) {
    animation-delay: 1.2s;
}

.circle:nth-child(5) {
    animation-delay: 1.6s;
}

@keyframes move {
    0% {
        transform: translateX(10px) scale(0.3);
    }

    45% {
        transform: translateX(135px) scale(0.8);
    }

    85% {
        transform: translateX(270px) scale(0.1);
    }
}